import * as React from 'react';
import { loginAsync } from '../login/indexSlice';
import axios from 'axios';
import Header from '@/commonComponents/header/Header';
import { useAppDispatch } from '../../app/hooks';
import useAuth from '@/utils/hooks/useAuth';
// import { RootState } from '../../app/store';
import { useNavigate } from 'react-router-dom';
import { Button, Form, Input } from 'antd-mobile';
// import { getToken } from '../../utils/localStorge';
import type { registerProps } from './types';
import './index.module.scss';

const { memo } = React;
const Register = () => {
  const dispatch = useAppDispatch();
  // const token = getToken();
  // const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const { back } = useAuth();
  const handleRegister = (val: registerProps) => {
    axios
      .post('/api/auth/register', val)
      .then((res) => {
        if (res.data.data.code === 200) {
          dispatch(loginAsync(val)).then((res) => {
            if (res.payload.code == 200 && res.payload.token) {
              navigate('/');
            }
          });
        }
      })
      .catch((err) => {
        //  console.log(err);
      });
  };
  return (
    // <div styleName="login-box">
    //   <Form
    //     layout="vertical"
    //     styleName="form-box"
    //     onFinish={handleRegister}
    //     footer={
    //       <div>
    //         <Button type="submit" block color="primary" size="large">
    //           确定
    //         </Button>
    //       </div>
    //     }
    //   >
    //     <Form.Item
    //       name="username"
    //       label="用户名"
    //       rules={[{ required: true, message: '用户名不能为空' }]}
    //     >
    //       <Input onChange={console.log} placeholder="请输入用户名" />
    //     </Form.Item>
    //     <Form.Item
    //       label="密码"
    //       name="password"
    //       rules={[{ required: true, message: '密码不能为空' }]}
    //     >
    //       <Input styleName="input" placeholder="请输入密码" type="password" />
    //     </Form.Item>
    //   </Form>
    // </div>
    <div styleName="modifypwd-content">
      <Header
        title={`注册账号`}
        onBack={back}
        style={{
          background: '#1ba9ba',
          color: '#fff',
        }}
        type={1}
      />
      <Form
        styleName="form-content"
        form={form}
        onFinish={handleRegister}
        layout="horizontal"
        // initialValues={formData}
        footer={
          <Button type="submit" styleName="register-btn" fill="solid">
            注册
          </Button>
        }
      >
        <Form.Item
          name="username"
          label="用户名"
          rules={[{ required: true, message: '用户名不能为空' }]}
        >
          <Input placeholder="请输入用户名" />
        </Form.Item>
        <Form.Item
          name="password"
          label="密码"
          rules={[
            { required: true, message: '密码不能为空!' },
            { type: 'string', min: 8, max: 30, pattern: /.{8,30}/ },
          ]}
        >
          <Input
            placeholder="请输入8-30为字符作为新密码"
            type="password"
            clearable
          />
        </Form.Item>
        <Form.Item
          name="againpwd"
          label="确认密码"
          rules={[
            { required: true, message: '确认密码不能为空!' },
            ({ getFieldValue }) => ({
              validator(rule, value) {
                if (!value || getFieldValue('password') === value) {
                  return Promise.resolve();
                }
                return Promise.reject('两次密码输入不一致');
              },
            }),
          ]}
        >
          <Input type="password" clearable placeholder="请再次输入密码" />
        </Form.Item>
      </Form>
    </div>
  );
};

export default memo(Register);
